<template>
<view class="flex flex-row">
  <view v-for="(item,index) in propList"  :style="{width: (item.width || 200)+'rpx'}">
    <view class="title flex a-item j-content ">{{ item.label }}</view>
    <view class="line-division"></view>
    <view v-for="(i,valIndex) in dataList" @tap.stop="clickCell(valIndex,item.prop)" class="reportContent flex a-item j-content" :style="{fontSize: (item.fontSize || 30)+'rpx'}">
        {{ isdecimal(i[item.prop]) }}
    </view>
    <view v-if="summary">
    <view  class="summary flex a-item j-content">
      {{index?summaryList[index] || "0":'合计'}}
    </view> 
  </view>
  </view>
</view>
</template>

<script>
import 'uni.scss'
export default {
  name: "report",
  props:{
    propList:{
      type: Array,
      default: []
    },
    dataList:{
      type: Array,
      default: []
    },
  
    summary:{
      type: Boolean,
      default: false
    },
    decimal:{
      type: Number,
      default: 2
    }
  },
  created(){

  },
  data(){
    return{
      summaryList:[]
    }
  },
  watch:{
    dataList:{
      handler(n){
        this.getSummary()
      },
      deep:true
    }
  },
  computed:{

  },
  methods:{
    isdecimal(val){
      if (/\d+\.\d+/.test(val)){
        return Number(val).toFixed(this.decimal)
      }else {
        return val
      }
    },
    clickCell(index,val){
      this.$emit('rowClick',this.dataList[index])
      this.$emit('rowCell',val)
    },
    getSummary(){
      if(this.dataList[0]){
        this.summaryList = this.propList.map(item=>{
        if(typeof this.dataList[0][item.prop] === 'number'){
          return this.dataList.reduce((pre,cur)=>pre + cur[item.prop],0)
        }else{
          return ''
        }
      })
      }else{
        this.summaryList = new Array(this.propList.length).fill('0')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.title{
  height: 80rpx;
  overflow: hidden;
}
.reportContent{
  height: 100rpx;
  overflow: hidden;
  border-bottom: rgba(200,200,200,0.5) 1px solid;
}
.summary{
  background: red;
  color:white
}
</style>
